<template>
  <div className="wrapper">
    <AppHeader title="饿了么 商家信息"/>
    <div className="business-logo">
      <!-- 修正图片路径 -->
      <img :src="logoImg">
    </div>
    <div className="business-info">
      <h1>{{ name }}</h1>
      <p>{{ startPrice }}元起送 | {{ deliveryFee }}元配送</p>
      <p>{{ description }}</p>
    </div>
    <ul className="food">
      <FoodItem
          :img="foodImg"
          :name="foodName"
          :price="foodPrice"
          :description="foodDescription"
      />
    </ul>
    <div className="cart">
      <div className="cart-left">
        <div className="cart-left-icon">
          <i className="fa fa-shopping-cart"></i>
          <div className="cart-left-icon-quantity">3</div>
        </div>
      </div>
      <div className="cart-right">
        <div className="cart-right-item">去结算</div>
      </div>
    </div>
    <AppFooter/>
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'
import FoodItem from '@/components/FoodItem.vue'

export default {
  components: {
    AppHeader,
    AppFooter,
    FoodItem
  },
  data() {
    return {
      logoImg: require('@/assets/img/sj08.png'), // 预先加载图片
      name: '万家饺子（软件园E18店）',
      startPrice: 15,
      deliveryFee: 3,
      description: '各种饺子炒菜',
      foodImg: require('@/assets/img/sp01.png'), // 预先加载图片
      foodName: '纯肉鲜肉（水饺）',
      foodPrice: 15,
      foodDescription: '新鲜猪肉',
      foodImg2: require('@/assets/img/sp03.png'), // 预先加载图片
      foodName2: '纯肉鲜肉（水饺）',
      foodPrice2: 15,
      foodDescription2: 'zhudafdsa'

    }
  }
}
</script>

<style>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 商家logo部分 ******************/
.wrapper .business-logo {
  width: 100%;
  height: 35vw;
  margin-top: 12vw; /* 使用上外边距避开header部分 */

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .business-logo img {
  width: 40vw;
  height: 30vw;
  border-radius: 5px;
  object-fit: cover; /* 确保图片正确显示 */
}

/****************** 商家信息部分 ******************/
.wrapper .business-info {
  width: 100%;
  height: 20vw;
  padding: 0 4vw;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* 左对齐内容 */
}

.wrapper .business-info h1 {
  font-size: 5vw;
  margin: 0;
}

.wrapper .business-info p {
  font-size: 3vw;
  color: #666;
  margin-top: 1vw;
  margin-bottom: 0;
}

/****************** 食品列表部分 ******************/
.wrapper .food {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 14vw; /* 使用下外边距避开footer部分 */
}

.wrapper .food li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;
  border-bottom: 1px solid #eee;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .food li .food-left {
  display: flex;
  align-items: center;
}

.wrapper .food li .food-left img {
  width: 20vw;
  height: 20vw;
  border-radius: 4px;
  object-fit: cover;
}

.wrapper .food li .food-left .food-left-info {
  margin-left: 3vw;
}

.wrapper .food li .food-left .food-left-info h3 {
  font-size: 3.8vw;
  color: #555;
  margin: 0;
}

.wrapper .food li .food-left .food-left-info p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
  margin-bottom: 0;
}

.wrapper .food li .food-right {
  width: 16vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .food li .food-right .fa-minus-circle {
  font-size: 5.5vw;
  color: #999;
  cursor: pointer;
}

.wrapper .food li .food-right p {
  font-size: 3.6vw;
  color: #333;
  margin: 0;
}

.wrapper .food li .food-right .fa-plus-circle {
  font-size: 5.5vw;
  color: #0097EF;
  cursor: pointer;
}

/****************** 购物车部分 ******************/
.wrapper .cart {
  width: 100%;
  height: 14vw;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
}

.wrapper .cart .cart-left {
  flex: 2;
  background-color: #505051;
  display: flex;
  align-items: center;
}

.wrapper .cart .cart-left .cart-left-icon {
  width: 16vw;
  height: 16vw;
  box-sizing: border-box;
  border: solid 1.6vw #444;
  border-radius: 8vw;
  background-color: #3190E8;
  font-size: 7vw;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: -4vw;
  margin-left: 3vw;

  position: relative;
}

.wrapper .cart .cart-left .cart-left-icon-quantity {
  width: 5vw;
  height: 5vw;
  border-radius: 2.5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}

.wrapper .cart .cart-left .cart-left-info {
  margin-left: 3vw;
}

.wrapper .cart .cart-left .cart-left-info p:first-child {
  font-size: 4.5vw;
  color: #fff;
  margin-top: 1vw;
  margin-bottom: 0;
}

.wrapper .cart .cart-left .cart-left-info p:last-child {
  font-size: 2.8vw;
  color: #AAA;
  margin-top: 0;
  margin-bottom: 0;
}

.wrapper .cart .cart-right {
  flex: 1;
}

/* 达到起送费时的样式 */
.wrapper .cart .cart-right .cart-right-item {
  width: 100%;
  height: 100%;
  background-color: #38CA73;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}

 /*不够起送费时的样式（只有背景色和鼠标样式的区别） */

.wrapper .cart .cart-right .cart-right-item{
  width: 100%;
  height: 100%;
  background-color: #535356;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;

  display: flex;
  justify-content: center;
  align-items: center;
}

</style>